<template>
	<div class="invite-box">
		<view class="center-box">
			<view class="title">prompt</view>
			<view class="content">Reciclado automaticamente após: {{ recycleTimeSecond || 0 }}s segundos de reciclagem
			</view>
			<view class="btn-group">
				<waves class="invite-specia" @onTap="$closeInvite">{{ 'Confirme' }}</waves>
			</view>
		</view>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		name: 'invite',
		props: {
			_specia: {
				type: String,
				default: ''
			}
		},
		computed: {
			...mapState({
				recycleTimeSecond: state => state.app.recycleTimeSecond,
			})
		},
		data() {
			return {}
		},

		mounted() {
			console.log('this.specia', this._specia);
		}
	}
</script>

<style scoped lang='scss'>
	.invite-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9999;

		.center-box {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 622rpx;
			padding: 32rpx;
			border-radius: 16rpx;
			opacity: 1;
			background: rgba(14, 18, 36, 1);

			.logo {
				position: absolute;
				top: -48rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 136rpx;
				height: 144rpx;
			}

			.close {
				position: absolute;
				top: 24rpx;
				right: 24rpx;
				width: 48rpx;
				height: 48rpx;
			}

			.title {
				text-align: center;
				color: #fff;
				font-size: 36rpx;
				font-weight: 600;
				font-family: "PingFang SC";
				letter-spacing: 0.6rpx;
			}

			.content {
				margin: 40rpx 0;
				font-size: 26rpx;
				font-family: "PingFang SC";
				letter-spacing: 0.6rpx;
				color: #fff;

				text {
					font-size: 32rpx;
					letter-spacing: 0.6rpx;
					color: rgba(69, 108, 255, 1);
				}
			}

			.btn-group {
				display: flex;
				justify-content: center;
				padding: 0 16rpx;

				.invite-specia {
					width: 526rpx;
					height: 88rpx;
					line-height: 88rpx;
					border-radius: 16rpx;
					text-align: center;
					background: linear-gradient(-46.8deg, rgba(63, 101, 255, 1) 0%, rgba(97, 141, 255, 1) 100%);
					color: #fff;
				}
			}
		}
	}
</style>